<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>系统设置</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script type="text/javascript" src="../layui/layui.js"></script>
    <script type="text/javascript" src="../js/jquery-1.12.2.min.js"></script>
</head>

<body>

<div>
    <button class="layui-btn" onclick="addInfo()">新增</button>
</div>

<table class="layui-hide" id="demo" lay-filter="test"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
<!--    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>-->
</script>


<script>

    //一般直接写在一个js文件中
    layui.use(['table', 'layer','form'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table;

        //执行一个 table 实例
        table.render({
            elem: '#demo'
            //,height: 420
            , url: '/number/sysNumber' //数据接口
            //,title: '用户表'
            , page: true //开启分页
            , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                , groups: 5 //只显示 1 个连续页码
                , first: false //不显示首页
                , last: false //不显示尾页
                , limit: 10  // 设置每页显示几条记录
                // , page: 10
                // , count: 100
                , limits: [10, 20, 30] // 设置每页显示条数的select控件的选项
            }
            , cols: [[ //表头
                {field: 'id', title: '序号', width: 80, sort: true, fixed: 'left'}
                , {field: 'projectName', title: '项目名称', width: 100, sort: true}
                , {field: 'prefix', title: '前缀', width: 100, sort: true}
                , {field: 'timeFormat', title: '日期格式', width: 250, sort: true}
                , {field: 'serialNum', title: '流水号', width: 100, sort: true}
                , {field: 'numberPreview', title: '编号预览', width: 250, sort: true}
                , {fixed: 'right', width: 165, align: 'center', toolbar: '#barDemo'}
            ]],
            parseData: function (res) { // res 即为原始返回的数据
                return {
                    "code": res.code, // 解析接口状态
                    "msg": res.msg, // 解析提示文本
                    "count": res.data.count, // 解析数据长度
                    "data": res.data.dataList // 解析数据列表
                };
            },
        });
        //监听行工具事件
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'detail') {
                //layer.msg('查看操作');

            } else if (layEvent === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    //向服务端发送删除指令
                    $.ajax({
                        type: "get",
                        url: "/unit/delete?id=" + data.id,
                        success: function (data) {
                            if (data.code == 0) {
                                // “demo” 表示table的id
                                alert(data.msg)
                                table.reload("demo");
                            } else {
                                layer.msg(data.info);
                            }
                        }
                    })
                });
            } else if (layEvent === 'edit') {
                //layer.msg('编辑操作');
                layer.open({
                    type: 2 //此处以iframe举例
                    , area: ['450px', '550px']
                    , content: 'number_update.html?id=' + data.id
                });
            }
        });
        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            var result = JSON.stringify(data.field);
            layer.alert(result, {
                title: '最终的搜索信息'
            });

            //执行搜索重载
            table.reload('demo', {
                page: {
                    curr: 1
                }
                , where: {
                    projectName: data.field.projectName,
                    prefix: data.field.prefix
                }
            }, 'data');

            return false;
        });
        // 监听搜索操作
        // var $ = layui.$, active = {
        //     reload: function () {
        //         var demoReload = $('#demoReload');
        //         var prefixReload = $('#prefixReload');
        //         //执行重载
        //         table.reload('demo', {
        //             page: {
        //                 curr: 1 //重新从第 1 页开始
        //             }
        //             , where: { // 额外的搜索条件
        //                 unitName: demoReload.val(),
        //                 uName: prefixReload.val(),
        //             }
        //         });
        //     }
        // };
        //
        // $('.demoTable .layui-btn').on('click', function () {
        //     var type = $(this).data('type');
        //     active[type] ? active[type].call(this) : '';
        // });
        //layer.msg('Hello World');
    });

</script>

<script type="text/javascript">
    //layer.msg("haha");
    function addInfo() {
        // 可以直接使用layer？？？
        // layer 是全局的，只要调用layui.user,在哪都可以使用，use里可以不写layer、
        // 回调的函数中也可以不使用var layer=layui.layer
        layer.open({
            type: 2 //此处以iframe举例
            , area: ['650px', '450px']
//                        ,offset: [ //为了演示，随机坐标
//                            Math.random()*($(window).height()-300)
//                            ,Math.random()*($(window).width()-390)
//                        ]
            , content: 'number_add.html'
        });
    }
</script>

</body>
</html>